import React from "react";
import {
    Anchor,Checkbox, Divider, Row, Col
  } from "antd";
import "./index.less"
const { Link } = Anchor;
const CheckboxGroup = Checkbox.Group;
 const plainOptions = ['A', 'B'];    //指定可选项
// const defaultCheckedList = ['Apple', 'Orange'];
function Index() {
  const [checkedList, setCheckedList] = React.useState();   //被选中的
  const [indeterminate, setIndeterminate] = React.useState(false);    //实现全选效果时，你可能会用到 indeterminate 属性。
  const [checkAll, setCheckAll] = React.useState(false);    //指定当前是否选中(默认是false)
  const onChange = list => {
    setCheckedList(list);
    setIndeterminate(!!list.length&&list.length!=2);
    setCheckAll(list.length==2);
  };

  const onCheckAllChange = e => {
     setCheckedList(e.target.checked ? plainOptions : []);
     setIndeterminate(false);
     setCheckAll(e.target.checked);
  };
  const handleAnchorClick = (e, link) => {
    e.preventDefault();
  };

  const subject=["before","middle","after"];
  const judge=(item)=>{
      if(item==="before"){
        return <span>课前</span>
      }else if(item==="middle"){
        return <span>课中</span>
      }else if(item==="after"){
        return <span>课后</span>
      }
  }


  const onShow=(item)=>{
   return (
     <>
       <Divider />
       <Checkbox
         indeterminate={indeterminate}
         onChange={onCheckAllChange}
         checked={checkAll}
         className="detail"
         id={item}
         key={item}
       >
         {judge(item)}
       </Checkbox>
       <Checkbox.Group
         style={{ width: "100%" }}
         onChange={onChange}
         value={checkedList}
       >
         <Row gutter={[8, 16]}>
           <Col span={2}>
             <Checkbox value="A">A</Checkbox>
           </Col>
           <Col span={21}>
             <div className="x"></div>
             <div className="a">
               <a>上移</a>&nbsp;
               <a>下移</a>&nbsp;
               <a>置顶</a>&nbsp;
               <a>移除</a>&nbsp;
               <a>审核</a>&nbsp;
             </div>
           </Col>
         </Row>
         <Row gutter={[8, 16]}>
           <Col span={2}>
             <Checkbox value="B">B</Checkbox>
           </Col>
           <Col span={21}>
             <div className="x"></div>
             <div className="a">
               <a>上移</a>&nbsp;
               <a>下移</a>&nbsp;
               <a>置顶</a>&nbsp;
               <a>移除</a>&nbsp;
               <a>审核</a>&nbsp;
             </div>
           </Col>
         </Row>
       </Checkbox.Group>
     </>
   );
  }
    return (
      <div className="Anchor">
        <div className="Anchor-left">
          <div>
            <h3>课程名称</h3>
          </div>
          <Anchor
            onClick={handleAnchorClick}
            getContainer={() => document.getElementById("content")}
          >
            <Link href="#before" title="课前" />
            <Link href="#middle" title="课中" />
            <Link
              href="#after"
              title="课后"
              //   target="_blank"
            />
          </Anchor>
        </div>
        <div className="Anchor-right" id="content">
          {
              subject.map((item)=>{
                return onShow(item)
              })
          }
          
        </div>
      </div>
    );
}
export default  Index
